var tbody = document.querySelector('tbody');
var input = document.querySelector('input');
var search = document.querySelector('.search');

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://192.168.20.50:3008/api/student/getStudent');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        var data = JSON.parse(xhr.responseText);
        data.forEach(function(value) {
            tbody.innerHTML += `
            <tr>
                <td>${value.id}</td>
                <td>${value.clazz}</td>
                <td>${value.name}</td>
                <td>${value.gender}</td>
                <td>${value.age}</td>
                <td>${value.hobby}</td>
                <td>${value.remark}</td>
                <td>${value.address}</td>
                <td>${value.tel}</td>
                <td>${value.date}</td>
                <td>
                    <button class="add">添加</button>
                    <button class="edit">修改</button>
                    <button class="del">删除</button>
                </td>
            </tr>
            `
            var add = document.querySelectorAll('.add');
            var edit = document.querySelectorAll('.edit');
            var del = document.querySelectorAll('.del');
            // 添加
            add.forEach(function(value) {
                value.addEventListener('click', function() {
                    location.assign('./page/add.html');
                })
            })

            // 修改
            edit.forEach(function(value) {
                value.addEventListener('click', function() {
                    location.assign('./page/edit.html?id=' + value.parentNode.parentNode.children[0].innerText);
                })
            })

            // 删除
            del.forEach(function(value) {
                value.addEventListener('click', function() {
                    var xhr = new XMLHttpRequest();
                    xhr.open('get', 'http://192.168.20.50:3008/api/student/removeStudent?id=' + value.parentNode.parentNode.children[0].innerText);
                    xhr.send();
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4) {
                            console.log(xhr.responseText);
                        }
                    }
                })
            })
        })
    }
}

// 搜索
search.onclick = function() {
    tbody.innerHTML = '';
    console.log(input.value.trim());
    var xhr2 = new XMLHttpRequest();
    if (input.value) {
        xhr2.open('get', 'http://192.168.20.50:3008/api/student/getStudent?name=' + input.value.trim());
    } else {
        xhr2.open('get', 'http://192.168.20.50:3008/api/student/getStudent');
    }
    xhr2.send();
    xhr2.onreadystatechange = function() {
        if (xhr2.readyState == 4) {
            var data2 = JSON.parse(xhr2.responseText);
            data2.forEach(function(value) {
                tbody.innerHTML += `
                <tr>
                    <td>${value.id}</td>
                    <td>${value.clazz}</td>
                    <td>${value.name}</td>
                    <td>${value.gender}</td>
                    <td>${value.age}</td>
                    <td>${value.hobby}</td>
                    <td>${value.remark}</td>
                    <td>${value.address}</td>
                    <td>${value.tel}</td>
                    <td>${value.date}</td>
                    <td>
                        <button class="add">添加</button>
                        <button class="edit">修改</button>
                        <button class="del">删除</button>
                    </td>
                </tr>
                `
                var add = document.querySelectorAll('.add');
                var edit = document.querySelectorAll('.edit');
                var del = document.querySelectorAll('.del');
                // 添加
                add.forEach(function(value) {
                    value.addEventListener('click', function() {
                        location.assign('./page/add.html');
                    })
                })

                // 修改
                edit.forEach(function(value) {
                    value.addEventListener('click', function() {
                        location.assign('./page/edit.html?id=' + value.parentNode.parentNode.children[0].innerText);
                    })
                })

                // 删除
                del.forEach(function(value) {
                    value.addEventListener('click', function() {
                        var xhr = new XMLHttpRequest();
                        xhr.open('get', 'http://192.168.20.50:3008/api/student/removeStudent?id=' + value.parentNode.parentNode.children[0].innerText);
                        xhr.send();
                        xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4) {
                                console.log(xhr.responseText);
                            }
                        }
                    })
                })
            })
        }
    }
}